import React, { useState, useEffect } from 'react';
import jsplumb from 'jsplumb';
import { ReactComponent as TopBgSvg } from './images/TopBg.svg';
import { ReactComponent as McaLayerBgSvg } from './images/McaLayerBg.svg';
import { ReactComponent as BottomBgSvg } from './images/BottomBg.svg';

import { ReactComponent as MobileSvg } from './images/Mobile.svg';
import { ReactComponent as TellerSvg } from './images/Teller.svg';
import { ReactComponent as StepPointSvg } from './images/StepPoint.svg';

import { ReactComponent as McaSvg } from './images/Mca.svg';
import { ReactComponent as ProdServiceSvg } from './images/ProdService.svg';
import { ReactComponent as CustServiceSvg } from './images/CustService.svg';
import { ReactComponent as DepositServiceSvg } from './images/DepositService.svg';
import { ReactComponent as PostingServiceSvg } from './images/PostingService.svg';

import { ReactComponent as HubSvg } from './images/Hub.svg';
import { ReactComponent as CrsSvg } from './images/Crs.svg';
import { ReactComponent as WealthSvg } from './images/Wealth.svg';
import { ReactComponent as FatcaSvg } from './images/Fatca.svg';
import { ReactComponent as TfmsSvg } from './images/Tfms.svg';

import './Chart8.less'

const Component = () => {
    const [jsPlumbInstance] = useState(jsplumb.jsPlumb.getInstance());

    useEffect(() => {
        function handleResize() {
            if (jsPlumbInstance) {
                jsPlumbInstance.repaintEverything();
            }
        }

        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    })

    useEffect(() => {
        jsPlumbInstance.ready(() => {
            jsPlumbInstance.reset();
            // jsPlumbInstance.setContainer('LineContainer');
            jsPlumbInstance.registerConnectionType('basic', {
                connector: ['Straight'],
                anchor: ["Right", "Left"],
                endpoint: 'Blank',
                paintStyle: { stroke: '#fff', strokeWidth: 1 },
            });
            jsPlumbInstance.connect({
                type: "basic",
                source: 'mobile-channel-start',
                target: 'mobile-channel-end',
            });
            jsPlumbInstance.connect({
                // type: "basic",
                source: 'mobile-channel-start',
                target: 'hub',
                connector: ['Bezier'],
                endpoint: 'Blank',
                anchor: ["Bottom", "Top"],
                paintStyle: { stroke: '#fff', strokeWidth: 1 },
            });
            jsPlumbInstance.connect({
                // type: "basic",
                source: 'product-microService',
                target: 'mca',
                connector: ['Flowchart'],
                endpoint: 'Blank',
                anchor: ["Right", "Left"],
                paintStyle: { stroke: '#fff', strokeWidth: 1 },
            });
        });
    }, []);

    useEffect(() => {
        return () => {
            if (jsPlumbInstance) {
                jsPlumbInstance.reset();
            }
        };
    }, []);

    return (
        <div className="homePage-graph">
            <div className='container'>
                <span className='hide-anchor mobile-anchor' id='mobile-channel-start'></span>
                <span className='hide-anchor mobile-success-anchor' id='mobile-channel-end'></span>
                <span className='hide-anchor hub-anchor' id='hub'></span>
                <span className='hide-anchor mca-anchor' id='mca'></span>
                <span className='hide-anchor product-microService-anchor' id='product-microService'></span>
                <div>
                    <TopBgSvg className="topBg" />
                    <McaLayerBgSvg className="mcaLayerBg" />
                    <BottomBgSvg className="bottomBg" />
                </div>
                <div>
                    <div className="mobile-channel">
                        <div className="step mobile">
                            <MobileSvg className="icon" />
                            <span className="step-title">Open CD on mobile phone</span>
                        </div>
                        <div className="stepPoint step login">
                            <StepPointSvg className="icon" />
                            <span className="step-title">Login</span>
                        </div>
                        <div className="stepPoint step selectCD">
                            <StepPointSvg className="icon" />
                            <span className="step-title">Select CD</span>
                        </div>
                        <div className="stepPoint step viewProdList">
                            <StepPointSvg className="icon" />
                            <span className="step-title">View product list</span>
                        </div>
                        <div className="stepPoint step inputDepositAmount">
                            <StepPointSvg className="icon" />
                            <span className="step-title">Input deposit amount</span>
                        </div>
                        <div className="stepPoint step selectDepositTerm">
                            <StepPointSvg className="icon" />
                            <span className="step-title">Select deposit term</span>
                        </div>
                        <div className="stepPoint step reqOpenCD">
                            <StepPointSvg className="icon" />
                            <span className="step-title">Request open CD</span>
                        </div>
                        <div className="stepPoint step success">
                            <StepPointSvg className="icon" />
                            <span className="step-title">Success</span>
                        </div>
                    </div>

                    <div className="teller-channel">
                        <div className="step teller" >
                            <TellerSvg className="icon" />
                            <span className="step-title">Open CD at teller</span>
                        </div>
                        <div className="stepPoint step inputCustInfo">
                            <StepPointSvg className="icon" />
                            <span className="step-title">Input customer information</span>
                        </div>
                        <div className="stepPoint step selectTermAndAmount">
                            <StepPointSvg className="icon" />
                            <span className="step-title">Select deposit term and amount</span>
                        </div>
                        <div className="stepPoint step inputAccountInfo">
                            <StepPointSvg className="icon" />
                            <span className="step-title">Input account information</span>
                        </div>
                        <div className="stepPoint step reviewAndApproval">
                            <StepPointSvg className="icon" />
                            <span className="step-title">Manager review and approval</span>
                        </div>
                        <div className="stepPoint step requestOpenCD">
                            <StepPointSvg className="icon" />
                            <span className="step-title">Request to open CD</span>
                        </div>
                        <div className="stepPoint step tellerSuccess">
                            <StepPointSvg className="icon" />
                            <span className="step-title">Success</span>
                        </div>
                    </div>
                </div>

                {/* bottom inner icon */}
                <div>
                    <div className="microservice mca">
                        <McaSvg className="icon" />
                        <span className="step-title"></span>
                    </div>
                    <div className="microservice product">
                        <ProdServiceSvg className="icon" />
                        <span className="step-title">Product Microservice</span>
                    </div>
                    <div className="microservice customer" >
                        <CustServiceSvg className="icon" />
                        <span className="step-title">Customer Microservice</span>
                    </div>
                    <div className="microservice deposit" >
                        <DepositServiceSvg className="icon" />
                        <span className="step-title">Deposit Microservice</span>
                    </div>
                    <div className="microservice posting" >
                        <PostingServiceSvg className="icon" />
                        <span className="step-title">Posting Microservice</span>
                    </div>
                </div>

                {/* bottom outer icon */}
                <div>
                    <div className="downstream hub" >
                        <HubSvg className="icon" />
                        <span className="step-title">HUB</span>
                    </div>
                    <div className="downstream crs" >
                        <CrsSvg className="icon" />
                        <span className="step-title">CRS</span>
                    </div>
                    <div className="downstream wealth" >
                        <WealthSvg className="icon" />
                        <span className="step-title">Wealth</span>
                    </div>
                    <div className="downstream fatca" >
                        <FatcaSvg className="icon" />
                        <span className="step-title">FATCA</span>
                    </div>
                    <div className="downstream tfms" >
                        <TfmsSvg className="icon" />
                        <span className="step-title">TFMS</span>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Component;